<template>
  <!-- 转账查询 -->
  <Card>
    <Form :model="form" ref="form" :rules="rules" label-position="right" label-width="90" style="display: block;">
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="选择渠道">
            <Select v-model="form.salechnl" clearable>
              <Option v-for="item in saleChannelList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- pppp -->
          <FormItem label="管理机构" prop="managecom">
            <Select v-model="form.managecom" clearable>
              <Option v-for="item in organizationList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="销售机构">
            <Select v-model="form.agentgroup" @on-change="val => getBranchmanager(val, { fileByte: 'branchmanager' })"
              clearable>
              <Option v-for="item in agentgroupList" :value="item.key" :key="item.key" class="agentgroup-too-long">
                {{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <!-- bran -->
          <FormItem label="区部组">
            <Select v-model="form.branchmanager" clearable>
              <Option v-for="item in groupDistrictList" :value="item.key" :key="item.key">{{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
      </Row>
      <Row gutter="10">
        <i-col span="6">
          <FormItem label="保单标志">
            <Select v-model="form.conttype" clearable>
              <Option v-for="item in [{ key: '1', value: '在职单' }, { key: '0', value: '孤儿单' },]" :value="item.key"
                :key="item.key">
                {{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="专员工号">
            <Input v-model="form.reagentno" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="保单号">
            <Input v-model="form.contno" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="银行处理起始日期" prop="dealbegintime">
            <DatePicker :value="form.dealbegintime" @on-change="val => $set(form, 'dealbegintime', val)"
              format="yyyy-MM-dd" type="date" transfer placeholder="请选择" />
          </FormItem>
          <!-- <FormItem label="银行处理起始日期" prop="date1">
            <DatePicker :value="form.date1" @on-change="dateChange($event, ['dealbegintime','dealendtime'])"
              format="yyyy-MM-dd" type="daterange" placeholder="请选择" />
          </FormItem> -->
        </i-col>
      </Row>
      <Row>
        <i-col span="6">
          <FormItem label="扣款结果">
            <Select v-model="form.result" clearable>
              <Option v-for="item in [{ key: '0000', value: '成功' }, { key: '1111', value: '失败' },]" :value="item.key"
                :key="item.key">
                {{ item.value }}</Option>
            </Select>
          </FormItem>
        </i-col>
        <i-col span="6">
          <FormItem label="客户号">
            <Input v-model="form.appntno" clearable placeholder="请输入" />
          </FormItem>
        </i-col>
        <i-col span="12" style="display: flex;justify-content: flex-end;">
          <Button type="primary" @click="loadResources" :loading="isLoading" icon="md-search"
            style="margin-right:20px;">查询</Button>
          <Button @click="resetForm(), getDay()" icon="md-refresh">重置</Button>
        </i-col>
      </Row>
    </Form>

    <Button @click="checkMust() && batchExport({
      url: '/scrm-bhuer/api/uerTransferAccounts/getListExcel',
      name: `${getManagecomName()}-转账清单-${form.dealbegintime}.xlsx`,
      tableData: tableData,
      msg: '列表无数据，不可进行此操作！'
    })" :loading="exPortLoading">导出清单</Button>

    <Table :columns="columns" :data="tableData" :loading="isLoading" @on-sort-change="sortChange" style="margin-top:10px">
      <template slot-scope="{ row }" slot="payyear">
        <span>{{ `${row.payyear}/${row.payyears + (row.payintvname || '年交')}` }}</span>
      </template>
      <template slot-scope="{ row }" slot="action">
        <span class="table-button" @click="showHistory(row)">历史记录</span>
        <!-- <span class="table-button" @click="showHistory(row,'newModal')">实时查询</span> -->
        <span class="table-button" @click="showNew(row)" style="margin-left: 10px;">实时查询</span>
      </template>
    </Table>

    <Page :total="ipagination.total" show-sizer show-total style="text-align:right;margin-top:20px"
      @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange"
      :page-size-opts="ipagination.pageSizeOptions" :current="ipagination.index" :page-size="ipagination.pageSize"
      transfer></Page>

    <Modal title="历史记录" v-model="historyModal" width="300" footer-hide :mask-closable="false">
      <div class="Steps-box">
        <Steps direction="vertical" size="small" style="margin-top:10px">
          <Step v-for="(item, index) in historyList" :key="index" icon="ios-radio-button-on">
            <template slot="title">
              <span style="font-size: 14px;font-weight: 600;color: #1D1D1D;">扣款时间：{{ item.dealdate }}</span>
            </template>
            <template slot="content">
              <div>扣款结果：{{ item.dealresults }}</div>
              <div v-if="item.dealresults == '失败'">失败原因：{{ item.cause }}</div>
            </template>
          </Step>
        </Steps>
      </div>
    </Modal>

    <Modal title="实时查询" v-model="newModal" width="300" footer-hide :mask-closable="false">
      <div class="Steps-box">
        <Steps direction="vertical" size="small" style="margin-top:10px">
          <Step v-for="(item, index) in newList" :key="index" icon="ios-radio-button-on">
            <template slot="title">
              <span style="font-size: 14px;font-weight: 600;color: #1D1D1D;">扣款时间：{{ item.dealdatetime }}</span>
            </template>
            <template slot="content">
              <div>扣款结果：{{ item.dealresults == 1 ? '成功' : '失败' }}</div>
              <div v-if="item.dealresults != 1">失败原因：{{ item.cause }}</div>
            </template>
          </Step>
          <!-- <Step icon="ios-radio-button-on">
          <template slot="title">
            <span style="font-size: 14px;font-weight: 600;color: #1D1D1D;">扣款时间：2022-12-20 20:23</span>
          </template>
          <template slot="content">
            <div>扣款结果：失败</div>
            <div>失败原因：余额不足</div>
          </template>
        </Step> -->
        </Steps>
      </div>
    </Modal>
  </Card>
</template>
<script>
import { getSelectListMixin } from "../../util/mixins/getSelectListMixin";
import { loadResourcesMixin } from "../../util/mixins/loadResourcesMixin";
import { tableChangeMixin } from "../../util/mixins/tableChangeMixin";
import { batchExport } from "../../util/mixins/batchExportMixin";
export default {
  name: "transfer",
  mixins: [
    loadResourcesMixin,
    tableChangeMixin,
    getSelectListMixin,
    batchExport,
  ],
  data() {
    return {
      mixinData: {
        tableAxios: "transferList",
        disableMixinCreated: true,
        listByte: "records",
      },
      rules: {
        // salechnl: [
        //   {
        //     required: true,
        //     message: "请选择渠道",
        //     trigger: "change",
        //   },
        // ],
        managecom: [
          {
            required: true,
            message: "请选择管理机构",
            trigger: "change",
          },
        ],
        dealbegintime: [
          {
            required: true,
            // type: "array",
            message: "请选择银行处理起始日期",
            trigger: "change",
          },
        ],
      },
      columns: [
        {
          title: "序号",
          type: "index",
          align: "center",
          width: "70",
        },
        {
          title: "保单号",
          key: "contno",
          align: "center",
          width: "170",
        },
        {
          title: "保单标志",
          key: "conttype",
          align: "center",
          width: "100",
        },
        {
          title: "投保人",
          key: "appntname",
          align: "center",
          width: "90",
        },
        {
          title: "应交日",
          key: "paytodate",
          align: "center",
          width: "110",
          sortable: true,
          sortMethod: (a, b, type) => 0
        },
        {
          title: "应交次数",
          key: "payyear",
          slot: "payyear",
          align: "center",
          width: "110",
          sortable: true,
          sortMethod: (a, b, type) => 0
        },
        {
          title: "应收保费",
          key: "dueprem",
          align: "center",
          width: "110",
          sortable: true,
          sortMethod: (a, b, type) => 0
        },
        {
          title: "专员",
          key: "renewalname",
          align: "center",
          width: "120",
        },
        {
          title: "最近一次划款日",
          key: "dealdate",
          align: "center",
          width: "140",
        },
        {
          title: "是否首转",
          key: "firsttutn",
          align: "center",
          width: "100",
        },
        {
          title: "扣款结果",
          key: "dealresult",
          align: "center",
          width: "100",
        },
        {
          title: "扣款失败原因",
          key: "reason",
          align: "center",
          width: "130",
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          fixed: "right",
          width: "180",
        },
      ],
      tableData: [
        // {
        //   appntname: "薛源",
        //   contno: "0004387719751888",
        //   conttype: "在职单",
        //   dealdate: "2020-07-01",
        //   dealresult: "成功",
        //   dueprem: "6122.40",
        //   firsttutn: "是",
        //   managecomname: null,
        //   paydate: null,
        //   payintv: "12",
        //   payintvname: "年交",
        //   paytime: null,
        //   paytodate: "2020-06-29",
        //   payyear: "2",
        //   payyears: "5",
        //   reason: "处理成功",
        //   renewalname: "赵星光",
        //   renewalno: "860300004",
        //   total: null,
        // },
      ],
      historyModal: false,
      newModal: false,
      dateForm: {},
      historyList: [],
      newList: [],
      premorder: 0,
      paytodateorder: 0,
      payyearorder: 0,
    };
  },
  created() {
    this.getDay();
  },
  methods: {
    getManagecomName() {
      let getManagecom = "";
      this.organizationList.forEach(
        (item) => item.key == this.form.managecom && (getManagecom = item.value)
      );
      return getManagecom;
    },
    showHistory(row) {
      // this.apiB
      //   .doTransferAccountsHistory({
      //     contno: row.contno,
      //     paytodate: row.paytodate,
      //   })
      //   .then((res) => {
      //     if (res.code == 200) {
      this.historyList = [
        {
          "dealdate": "2023-07-29",
          "dealdatetime": null,
          "times": null,
          "dealresults": "失败",
          "cause": "-all-整包业务失败，一般为账户余额不足，请联系客户核实"
        },
        {
          "dealdate": "2023-07-29",
          "dealdatetime": null,
          "times": null,
          "dealresults": "失败",
          "cause": "-all-整包业务失败，一般为账户余额不足，请联系客户核实"
        },
        {
          "dealdate": "2023-07-28",
          "dealdatetime": null,
          "times": null,
          "dealresults": "失败",
          "cause": "-all-整包业务失败，一般为账户余额不足，请联系客户核实"
        }
      ];
      this.historyModal = true;
      //   } else this.$Message.info(res.msg);
      // });
    },
    showNew(row) {
      // this.apiB
      //   .doTransferAccountsRealTime({ contno: row.contno })
      //   .then((res) => {
      //     if (res.code == 200) {
      this.newList = [
        {
          "dealdate": "2023-07-29",
          "dealdatetime": null,
          "times": null,
          "dealresults": "失败",
          "cause": "-all-整包业务失败，一般为账户余额不足，请联系客户核实"
        },
        {
          "dealdate": "2023-07-29",
          "dealdatetime": null,
          "times": null,
          "dealresults": "失败",
          "cause": "-all-整包业务失败，一般为账户余额不足，请联系客户核实"
        },
        {
          "dealdate": "2023-07-28",
          "dealdatetime": null,
          "times": null,
          "dealresults": "失败",
          "cause": "-all-整包业务失败，一般为账户余额不足，请联系客户核实"
        }
      ];
      this.newModal = true;
      //   } else this.$Message.info(res.msg);
      // });
    },
    checkMust() {
      console.log(this.form);
      let flag;
      this.$refs.form.validate((valid) => (flag = valid));
      return flag;
      return true;
      // {
      //   if (valid) {
      //   } else {
      //   }
      // }
    },
    dateChange(e, arr) {
      arr.forEach((fileByte, index) =>
        this.$set(this.form, fileByte, e[index])
      );
    },
    getDay() {
      let date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      this.$set(
        this.form,
        "dealendtime",
        `${year}-${month > 9 ? month : "0" + month}-${day > 9 ? day : "0" + day
        }`
      );
    },
    //表单---保单金额排序asc
    sortChange(column, key, order) {
      //   if (column.key == "paytodate") {

      //     } else if (column.order == "desc") {
      //       // 降序
      //       this.paytodateorder = 2;
      //     } else {
      //       // 默认
      //       this.paytodateorder = 0;
      //     }
      //   }
      this.form.sortBy = column.key
      this.form.sortOrder = column.order
      console.log(this.form.sortBy, this.form.sortOrder);
      this.loadResources()
    }
  },
};
</script>
<style scoped>
.Steps-box {
  height: 300px;
  overflow-y: scroll;
}

/* .agentgroup-too-long {
  max-width: 300px;
  white-space: unset;
} */
</style>
